<template>
    <div class="box" @click="rightClickOK">
        <div class="top">
            <div class="nav">
                <div :class="{ btn: true, active: selectIndex == 0 }" @click="selectIndex = 0">
                    <Home></Home>
                </div>
                <div :class="{ btn: true, active: selectIndex == 1 }" @click="selectIndex = 1">
                    <HistoryIcon></HistoryIcon>
                </div>
            </div>
            <div class="tool">
                <div class="btn" title="排序" @click="changeTheme">
                    <Light v-if="theme == 'light'"></Light>
                    <Dark v-else></Dark>
                </div>
                <div class="btn" title="设置" @click="goSetting(myApi)">
                    <Set></Set>
                </div>
                <div class="btn" title="网络视频" @click="goNetVideo">
                    <Net></Net>
                </div>
                <div class="btn" title="排序" @click="handleSort">
                    <Asc v-if="sort == 'asc'"></Asc>
                    <Desc v-else></Desc>
                </div>
                <div class="btn" title="显示方式" @click="changeDisplay">
                    <Card v-if="displayMethod == 'card'"></Card>
                    <List v-else></List>
                </div>
            </div>
        </div>
        <HomeBody @playInfo="PlayInfo" ref="homeBody" v-if="selectIndex == 0"></HomeBody>
        <History v-else @playInfo="PlayInfo"></History>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import homeHooks from './index'
import { goSetting } from './tools'
import Set from "@renderer/components/icons/set.vue"
import List from '@renderer/components/icons/list.vue'
import Card from '@renderer/components/icons/card.vue'
import Asc from '@renderer/components/icons/asc.vue'
import Desc from '@renderer/components/icons/desc.vue'
import Light from '@renderer/components/icons/light.vue'
import Dark from '@renderer/components/icons/dark.vue'
import Net from '@renderer/components/icons/net.vue'
import Home from '@renderer/components/icons/home.vue'
import HistoryIcon from '@renderer/components/icons/history.vue'
import HomeBody from './HomeBody/index.vue'
import History from './History/index.vue'
import { playerInfoStore } from '@renderer/store/playerInfo'
import { storeToRefs } from 'pinia'
const { ipcRenderer } = require('electron')
const selectIndex = ref(0)
const playerInfo = playerInfoStore()
const { currentPlaylist } = storeToRefs(playerInfo)
const homeBody = ref(null) as any
let { myApi, displayMethod, sort, theme, openMoreVideos, changeTheme, changeDisplay } = homeHooks()
const rightClickOK = () => {
    if (homeBody.value) homeBody.value.closeMenu()
}
const PlayInfo = (info: any) => {
    let name: string | number = 'setPlay'
    openMoreVideos.value ? name = Date.now() : name = 'setPlay'
    const obj = {
        name: name,
        title: info.item.name,
        url: '/Player',
        width: 1200,
        height: 750,
    }

    currentPlaylist.value = info.videos
    playerInfo.localPlayback = info.item
    ipcRenderer.send('update-storage', JSON.stringify(playerInfo.$state), 'playerInfo')
    myApi.value.newOpen(obj)
}
const goNetVideo = () => {
    const obj = {
        name: 'netVideo',
        title: '网络视频',
        url: '/NetVideo',
        width: 1200,
        height: 750
    }
    myApi.value.newOpen(obj)
}
const handleSort = () => {
    sort.value = sort.value == 'asc' ? 'desc' : 'asc'
    homeBody.value!.changeSorting(sort.value)
}
onMounted(() => {
    myApi.value = window.api
})
</script>

<style scoped lang="scss">
.box {
    color: var(--text);
    background-color: var(--back);
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 5px;
    box-sizing: border-box;
    user-select: none;

    .top {
        @include mixin.box_shadow();
        display: grid;
        grid-template-columns: 2fr 1fr;
        z-index: 4;
        align-items: center;

        .nav {
            top: 0;
            right: 0;
            display: flex;
            justify-content: left;
            gap: 5px;
            padding: 3px 10px;

            .active {
                background-color: #ececec;
            }
        }

        .tool {
            top: 0;
            right: 0;
            display: flex;
            justify-content: right;
            gap: 5px;
            padding: 3px 10px;
        }

        .btn {
            width: 30px;
            height: 30px;
            padding: 5px;
            box-sizing: border-box;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            @include mixin.box_shadow();
        }
    }
}
</style>